<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { PaginationProps } from "@pureadmin/table";
import { computed, onMounted, reactive, ref } from "vue";
import { getDataBySQLDesc } from "@/api/common";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { useDictionary } from "@/hooks/useDictionary";
import { generateSourceColors, getDepartmentColor } from "@/utils/colors";
defineOptions({
  name: "QuantityCorrespondingToDesignChanges"
});
const { dicData, fetchDictionary } = useDictionary({
  action: "public/get_dept"
});
const { dicData: changeSourceDicData } = useDictionary({
  action: "public/get_ecr_bgly"
});
const supplierOptions = computed(() => {
  return dicData.value.map(item => ({
    label: item["部门名称"], // 根据实际接口返回调整字段
    value: item["部门编号"]
  }));
});
const supplierOptions2 = computed(() => {
  return changeSourceDicData.value.map(item => ({
    label: item["变更来源说明"], // 根据实际接口返回调整字段
    value: item["变更来源编码"]
  }));
});
const monthMap = new Map();
const loading = ref(false);
const form = ref({
  year: null,
  bmbh: null,
  bglybm: null,
  ecrjd: null,
  ecrzt: null,
  ecrdjb: null
});
const option = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    formatter: function (params) {
      let tooltip = `${params[0].name}<br>`;
      params.forEach(item => {
        if (item.value > 0) {
          // 从系列名称中拆分变更来源和部门
          const [source, department] = item.seriesName.split(" - ");
          tooltip += `来源：${source}<br>`;
          tooltip += `部门：${department}<br>`;
          tooltip += `占比：<b>${(item.value * 100).toFixed(1)}%</b><br>`;
        }
      });
      return tooltip;
    }
  },
  legend: {
    data: [],
    top: 0,
    left: "center",
    width: "90%",
    type: "scroll",
    pageButtonPosition: "end",
    pageIconSize: 12
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "10%",
    top: "20%", // 增加顶部空间容纳图例
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#666"
      }
    },
    axisTick: {
      alignWithLabel: true
    },
    axisLabel: {
      fontSize: 12,
      color: "#7f8c8d"
    }
  },
  yAxis: {
    type: "value",
    name: "占比",
    nameTextStyle: {
      fontSize: 12,
      padding: [0, 0, 0, 20]
    },
    axisLabel: {
      formatter: (value: number) => `${(value * 100).toFixed(1)}%`
    },
    axisLine: {
      show: true
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "#f0f0f0"
      }
    },
    max: 1 // 最大为100%
  },
  series: []
});
const searchColumns = computed<PlusColumn[]>(() => [
  {
    label: "年度",
    prop: "year",
    valueType: "date-picker",
    fieldProps: {
      type: "year",
      valueFormat: "YYYY",
      placeholder: "请选择审核时间"
    }
  },
  {
    label: "申请部门",
    prop: "bmbh",
    valueType: "select",
    fieldProps: {
      filterable: true,
      remote: true,
      placeholder: "请选择申请部门",
      remoteMethod: searchDepartment
    },
    options: supplierOptions.value // 初始为空，后续更新后 searchColumns 也会更新
  },
  {
    label: "变更来源",
    prop: "bglybm",
    valueType: "select",
    fieldProps: {
      filterable: true,
      placeholder: "请选择变更来源"
    },
    options: supplierOptions2.value // 初始为空，后续更新后 searchColumns 也会更新
  }
]);
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const data = ref([
  {
    name: "张三",
    value: 10
  },
  {
    name: "里斯",
    value: 20
  }
]);
const tableData = ref([]);
const columns = ref([
  {
    prop: "月份",
    label: "月份"
  },
  {
    prop: "申请部门",
    label: "申请部门"
  },
  {
    prop: "变更来源",
    label: "变更来源"
  },
  {
    prop: "变更数量",
    label: "变更数量"
  },
  {
    prop: "合计",
    label: "合计"
  },
  {
    prop: "占比",
    label: "占比",
    formatter: row => {
      return (row.占比 * 100).toFixed(2) + "%";
    }
  }
]);
const processDetailedData = data => {
  // 提取并排序月份
  const months = [...new Set(data.map(item => item.月份))].sort((a, b) => {
    const monthNumA = parseInt(a);
    const monthNumB = parseInt(b);
    return monthNumA - monthNumB;
  });

  // 生成唯一系列标识：变更来源 + 申请部门（不合并任何数据）
  // 使用Map存储每个唯一组合的信息
  const seriesMap = new Map();
  data.forEach(item => {
    // 生成唯一键：变更来源|申请部门（使用特殊符号分隔避免冲突）
    const key = `${item.变更来源}|${item.申请部门}`;

    if (!seriesMap.has(key)) {
      // 初始化该系列的数据数组（每个月份对应一个值）
      const initialData = months.map(month => 0);
      seriesMap.set(key, {
        source: item.变更来源, // 变更来源
        department: item.申请部门, // 申请部门
        name: `${item.变更来源} - ${item.申请部门}`, // 显示名称
        data: initialData
      });
    }

    // 找到当前月份在数组中的索引
    const monthIndex = months.indexOf(item.月份);
    // 设置对应月份的值（不合并，直接赋值）
    const seriesItem = seriesMap.get(key);
    seriesItem.data[monthIndex] = parseFloat(item.占比);
  });

  // 转换为数组
  const seriesList = Array.from(seriesMap.values());

  // 提取所有变更来源（用于颜色分组）
  const sources = [...new Set(seriesList.map(item => item.source))];

  return {
    months: months,
    series: seriesList,
    sources: sources
  };
};

const searchDepartment = departmentName => {
  fetchDictionary({
    action: "public/get_dept",
    bmmc: departmentName
  });
};
const getAllParams = async () => {
  const timeParams = { action: "public/get_server_sysdate" };
  const funcParams = {
    action: "public/get_bi_sjfw",
    hsmc: "get_yf_ecr_1yfl_fx"
  };
  const { data: timeData } = await getDataBySQLDesc(timeParams);
  form.value.year = timeData[0]["年"];
  const { data: paramsData } = await getDataBySQLDesc(funcParams);
  paramsData.map(e => {
    form.value[e["参数编码"]] = e["参数值"];
  });
  handleSearch();
};
const getChartsData = async () => {
  const params = {
    action: "biz/reports/get_yf_ecr_lyfl_fx",
    ...form.value
  };
  const { data } = await getDataBySQLDesc(params);
  const mockData = [
    // 1月数据
    {
      月份: "1月",
      申请部门: "信息管理部",
      变更来源: "客户要求",
      变更数量: "2",
      合计: "14",
      占比: "0.1429"
    },
    {
      月份: "1月",
      申请部门: "软件开发部",
      变更来源: "内部优化",
      变更数量: "5",
      合计: "14",
      占比: "0.3571"
    },
    {
      月份: "1月",
      申请部门: "硬件开发部",
      变更来源: "市场需求",
      变更数量: "4",
      合计: "14",
      占比: "0.2857"
    },
    {
      月份: "1月",
      申请部门: "测试部",
      变更来源: "内部优化",
      变更数量: "3",
      合计: "14",
      占比: "0.2143"
    },

    // 2月数据（包含相同变更来源的不同部门）
    {
      月份: "2月",
      申请部门: "产品部",
      变更来源: "其他",
      变更数量: "3",
      合计: "9",
      占比: "0.3333"
    },
    {
      月份: "2月",
      申请部门: "运维部",
      变更来源: "客户要求",
      变更数量: "4",
      合计: "9",
      占比: "0.4444"
    },
    {
      月份: "2月",
      申请部门: "信息管理部",
      变更来源: "客户要求",
      变更数量: "2",
      合计: "9",
      占比: "0.2222"
    },

    // 3月数据
    {
      月份: "3月",
      申请部门: "软件开发部",
      变更来源: "市场需求",
      变更数量: "6",
      合计: "20",
      占比: "0.3000"
    },
    {
      月份: "3月",
      申请部门: "硬件开发部",
      变更来源: "技术升级",
      变更数量: "5",
      合计: "20",
      占比: "0.2500"
    },
    {
      月份: "3月",
      申请部门: "测试部",
      变更来源: "其他",
      变更数量: "2",
      合计: "20",
      占比: "0.1000"
    },
    {
      月份: "3月",
      申请部门: "产品部",
      变更来源: "客户要求",
      变更数量: "4",
      合计: "20",
      占比: "0.2000"
    },
    {
      月份: "3月",
      申请部门: "运维部",
      变更来源: "内部优化",
      变更数量: "3",
      合计: "20",
      占比: "0.1500"
    },

    // 4月数据
    {
      月份: "4月",
      申请部门: "信息管理部",
      变更来源: "市场需求",
      变更数量: "3",
      合计: "22",
      占比: "0.1364"
    },
    {
      月份: "4月",
      申请部门: "软件开发部",
      变更来源: "技术升级",
      变更数量: "5",
      合计: "22",
      占比: "0.2273"
    },
    {
      月份: "4月",
      申请部门: "硬件开发部",
      变更来源: "其他",
      变更数量: "4",
      合计: "22",
      占比: "0.1818"
    },
    {
      月份: "4月",
      申请部门: "测试部",
      变更来源: "客户要求",
      变更数量: "6",
      合计: "22",
      占比: "0.2727"
    },
    {
      月份: "4月",
      申请部门: "产品部",
      变更来源: "内部优化",
      变更数量: "2",
      合计: "22",
      占比: "0.0909"
    },
    {
      月份: "4月",
      申请部门: "运维部",
      变更来源: "成本控制",
      变更数量: "2",
      合计: "22",
      占比: "0.0909"
    },
    // 5月 (3个部门)
    {
      月份: "5月",
      申请部门: "软件开发部",
      变更来源: "技术升级",
      变更数量: "7",
      合计: "15",
      占比: "0.4667"
    },
    {
      月份: "5月",
      申请部门: "硬件开发部",
      变更来源: "其他",
      变更数量: "3",
      合计: "15",
      占比: "0.2000"
    },
    {
      月份: "5月",
      申请部门: "测试部",
      变更来源: "客户要求",
      变更数量: "5",
      合计: "15",
      占比: "0.3333"
    },

    // 6月 (4个部门)
    {
      月份: "6月",
      申请部门: "产品部",
      变更来源: "内部优化",
      变更数量: "6",
      合计: "19",
      占比: "0.3158"
    },
    {
      月份: "6月",
      申请部门: "运维部",
      变更来源: "市场需求",
      变更数量: "5",
      合计: "19",
      占比: "0.2632"
    },
    {
      月份: "6月",
      申请部门: "信息管理部",
      变更来源: "技术升级",
      变更数量: "4",
      合计: "19",
      占比: "0.2105"
    },
    {
      月份: "6月",
      申请部门: "软件开发部",
      变更来源: "其他",
      变更数量: "4",
      合计: "19",
      占比: "0.2105"
    },

    // 7月 (5个部门)
    {
      月份: "7月",
      申请部门: "硬件开发部",
      变更来源: "客户要求",
      变更数量: "5",
      合计: "21",
      占比: "0.2381"
    },
    {
      月份: "7月",
      申请部门: "测试部",
      变更来源: "内部优化",
      变更数量: "4",
      合计: "21",
      占比: "0.1905"
    },
    {
      月份: "7月",
      申请部门: "产品部",
      变更来源: "市场需求",
      变更数量: "3",
      合计: "21",
      占比: "0.1429"
    },
    {
      月份: "7月",
      申请部门: "运维部",
      变更来源: "技术升级",
      变更数量: "6",
      合计: "21",
      占比: "0.2857"
    },
    {
      月份: "7月",
      申请部门: "信息管理部",
      变更来源: "其他",
      变更数量: "3",
      合计: "21",
      占比: "0.1429"
    },

    // 8月 (6个部门)
    {
      月份: "8月",
      申请部门: "运维部",
      变更来源: "技术升级",
      变更数量: "4",
      合计: "25",
      占比: "0.1600"
    },
    {
      月份: "8月",
      申请部门: "信息管理部",
      变更来源: "其他",
      变更数量: "3",
      合计: "25",
      占比: "0.1200"
    },
    {
      月份: "8月",
      申请部门: "软件开发部",
      变更来源: "客户要求",
      变更数量: "5",
      合计: "25",
      占比: "0.2000"
    },
    {
      月份: "8月",
      申请部门: "硬件开发部",
      变更来源: "内部优化",
      变更数量: "6",
      合计: "25",
      占比: "0.2400"
    },
    {
      月份: "8月",
      申请部门: "测试部",
      变更来源: "市场需求",
      变更数量: "4",
      合计: "25",
      占比: "0.1600"
    },
    {
      月份: "8月",
      申请部门: "产品部",
      变更来源: "技术升级",
      变更数量: "3",
      合计: "25",
      占比: "0.1200"
    },

    // 9月 (3个部门)
    {
      月份: "9月",
      申请部门: "硬件开发部",
      变更来源: "内部优化",
      变更数量: "5",
      合计: "13",
      占比: "0.3846"
    },
    {
      月份: "9月",
      申请部门: "测试部",
      变更来源: "市场需求",
      变更数量: "4",
      合计: "13",
      占比: "0.3077"
    },
    {
      月份: "9月",
      申请部门: "产品部",
      变更来源: "技术升级",
      变更数量: "4",
      合计: "13",
      占比: "0.3077"
    },

    // 10月 (4个部门)
    {
      月份: "10月",
      申请部门: "运维部",
      变更来源: "其他",
      变更数量: "6",
      合计: "22",
      占比: "0.2727"
    },
    {
      月份: "10月",
      申请部门: "信息管理部",
      变更来源: "客户要求",
      变更数量: "5",
      合计: "22",
      占比: "0.2273"
    },
    {
      月份: "10月",
      申请部门: "软件开发部",
      变更来源: "内部优化",
      变更数量: "7",
      合计: "22",
      占比: "0.3182"
    },
    {
      月份: "10月",
      申请部门: "硬件开发部",
      变更来源: "市场需求",
      变更数量: "4",
      合计: "22",
      占比: "0.1818"
    },

    // 11月 (5个部门)
    {
      月份: "11月",
      申请部门: "测试部",
      变更来源: "技术升级",
      变更数量: "4",
      合计: "24",
      占比: "0.1667"
    },
    {
      月份: "11月",
      申请部门: "产品部",
      变更来源: "其他",
      变更数量: "5",
      合计: "24",
      占比: "0.2083"
    },
    {
      月份: "11月",
      申请部门: "运维部",
      变更来源: "客户要求",
      变更数量: "6",
      合计: "24",
      占比: "0.2500"
    },
    {
      月份: "11月",
      申请部门: "信息管理部",
      变更来源: "内部优化",
      变更数量: "5",
      合计: "24",
      占比: "0.2083"
    },
    {
      月份: "11月",
      申请部门: "软件开发部",
      变更来源: "市场需求",
      变更数量: "4",
      合计: "24",
      占比: "0.1667"
    },

    // 12月 (6个部门)
    {
      月份: "12月",
      申请部门: "信息管理部",
      变更来源: "内部优化",
      变更数量: "5",
      合计: "28",
      占比: "0.1786"
    },
    {
      月份: "12月",
      申请部门: "软件开发部",
      变更来源: "市场需求",
      变更数量: "6",
      合计: "28",
      占比: "0.2143"
    },
    {
      月份: "12月",
      申请部门: "硬件开发部",
      变更来源: "技术升级",
      变更数量: "4",
      合计: "28",
      占比: "0.1429"
    },
    {
      月份: "12月",
      申请部门: "测试部",
      变更来源: "其他",
      变更数量: "3",
      合计: "28",
      占比: "0.1071"
    },
    {
      月份: "12月",
      申请部门: "产品部",
      变更来源: "客户要求",
      变更数量: "5",
      合计: "28",
      占比: "0.1786"
    },
    {
      月份: "12月",
      申请部门: "运维部",
      变更来源: "内部优化",
      变更数量: "5",
      合计: "28",
      占比: "0.1786"
    }
  ];
  const chartData = processDetailedData(data);
  // 生成颜色映射表
  const sourceColorMap = generateSourceColors(chartData.sources);
  // 为每个系列（变更来源+部门）分配颜色
  const seriesWithColors = chartData.series.map((seriesItem, index) => {
    // 按变更来源分组计数，用于生成颜色变体
    const sameSourceSeries = chartData.series.filter(
      item => item.source === seriesItem.source
    );
    const sameSourceIndex = sameSourceSeries.indexOf(seriesItem);

    // 生成颜色
    const baseColor = sourceColorMap.get(seriesItem.source);
    const color = getDepartmentColor(baseColor, sameSourceIndex);
    return {
      ...seriesItem,
      itemStyle: {
        color: color
      }
    };
  });
  option.value.legend.data = seriesWithColors.map(item => item.name);
  option.value.xAxis.data = chartData.months;
  option.value.series = seriesWithColors.map(item => ({
    name: item.name,
    type: "bar",
    stack: "total", // 同一堆叠组
    data: item.data,
    itemStyle: item.itemStyle,
    emphasis: {
      focus: "series"
    }
  }));
  monthMap.clear();
  data.forEach(item => {
    if (!monthMap.has(item.月份)) {
      monthMap.set(item.月份, 0);
    }
    monthMap.set(item.月份, monthMap.get(item.月份) + 1);
  });
  tableData.value = data;
};
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 || columnIndex === 4) {
    if (rowIndex + 1 === monthMap.get(row.月份)) {
      return {
        rowspan: monthMap.get(row.月份),
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
};
const handleSearch = () => {
  getChartsData();
  // getTableData();
};
const handleRest = () => {
  getAllParams();
};
onMounted(() => {
  getAllParams();
});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="80" label-position="right" @search="handleSearch"
        @reset="handleRest" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="chart bar-chart">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
    <el-card class="table-card">
      <div class="operate">
        <el-button type="primary" @click="exportExcel(tableData, 'ECR变更来源分析.xlsx')">导出</el-button>
      </div>
      <PureTable :loading="loading" border row-key="id" alignWhole="center" showOverflowTooltip :data="tableData"
        :columns="columns" :pagination="null" :span-method="objectSpanMethod" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.table-card {
  margin-top: 20px;
}

.operate {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}
</style>
